<script setup>
import {onMounted, ref} from 'vue';
import axios from "axios";

let message = ref('');
let messageCollection = ref([]);
let models = ref([])
let model = ref([])

onMounted(() => {
  axios.get("http://localhost:8000/deepseek-models").then(response => {
    models.value = response.data.data;
    model.value = models.value[0]
  }).catch(function (error) {
    console.log(error);
  });
})

let sendMessage = () => {
  if (message.value === '') {
    alert('请输入内容')
    return;
  }

  messageCollection.value.push({
    content: message.value,
    role: 'user'
  });
  axios.post("http://localhost:8000/deepseek-chat", {
    msg: message.value,
    model: model.value
  }).then(response => {
    messageCollection.value.push({
      content: response.data.data.response,
      role: 'deepseek'
    })
  }).catch(function (error) {
    console.log(error);
  });

  message.value = '';
}
</script>

<template>
  <div class="message-box">
    <div class="model-selector">
      <label for="model">模型选择</label>
      <select v-model="model">
        <template v-for="(item, index) in models" id="model-select" :key="index">
          <option :value="item">{{ item }}</option>
        </template>
      </select>
    </div>
    <template v-for="(item, index) in messageCollection" :key="index">
      <div class="msg-box" :class="item.role === 'user'? 'user-msg-box' : 'system-msg-box'">
        <div class="msg-role">{{ item.role }}：</div>
        <div class="msg-content">{{ item.content }}</div>
      </div>
    </template>
  </div>
  <div class="input-box">
    <input name="input" v-model="message" placeholder="请输入您的提问">
    <button @click="sendMessage">发送</button>
  </div>
</template>

<style scoped>
.message-box {
  height: calc(100vh - 100px);
  width: 100vw;
  padding: 30px;
  margin: 0;
  background: #f8f8f8;
  border-bottom: #222222 2px solid;
  overflow: auto;
}

.input-box {
  height: 98px;
  width: 100vw;
  text-align: center;
  line-height: 98px;
}

.input-box input {
  width: 70vw;
  height: 40px;
  border-radius: 8px;
  border: #eeeeee 1px solid;
  font-size: 18px;
  padding: 0 20px;
}

.input-box button {
  width: 70px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  margin-left: 5px;
  border-radius: 5px;
}

.msg-box {
  margin-bottom: 15px;
}

.msg-box .msg-role {
  font-size: 20px;
  font-weight: bold;
}

.user-msg-box {
  text-align: right;
}

.msg-box .msg-content {
  background: #d2d2d2;
  padding: 10px;
  min-height: 80px;
}

</style>
